PROGRAMMER DES JEUX AVECUNITY3D (V2018)ETC#

2eme Partie : ENVIRONNEMENT DE JEUX 2D ET 3D

Table des matières

PROGRAMMER DES JEUX AVECUNITY3D (V2018)ETC#...............................................................................1

2eme Partie : ENVIRONNEMENT DE JEUX 2D ET 3D................................................................................1

I – Construire un environnement de jeu en 2D :....................................................................................2

1) Les différents types de jeux possibles :.......................................................................................2

2) Le mode plan préconisé dans « 1_TileMap_LevelEditor » :.......................................................8

a) Explication du mode en réutilisant les Sprites précédents :...................................................8

b) Observez les modèles fournies dans le projet :.....................................................................13

3) Mode Isométrique présenté dans Iso_TileMaps_Demo_Project :..........................................14

a) Préparation :..........................................................................................................................14

b) Explication pratique des différents composants disponibles :.............................................15

c) Explorer un niveau étendu avec la souris :............................................................................19

d) Observez les scènes qui ont construites avec les différentes palettes :...............................19

4) Mode Isométrique présenté dans MapTile_GridCreator :......................................................19

a) Explication du mode avec les palettes fournies dans ce projet :...........................................19

b) Observer les scènes qui sont fournies en exemple :.............................................................24

c) Construire et utiliser ses propres palettes de tuile :.............................................................24

d) Des Décors plus réalistes ?....................................................................................................28

II – Construire un environnement de jeu en 3D :.................................................................................29

1) ProBuilder :...............................................................................................................................29

a) Vérification des composants nécessaires :............................................................................29

b) Utilisation avec les éléments préfabriqués :..........................................................................30

c) Présentation des principaux outils de création d’un décor :.................................................34

d) Exemple de prototypage d’une piscine :...............................................................................42

I – Construire un environnement de jeu en 2D :

1) Les différents types de jeux possibles :

Selon les angles de vue :

- Mode Plan : Vue de dessus ou vue latérale (utilisée pour les jeux de plateforme)

- Mode isométrique : Avec effet de perspective, parfois nommé 2D5

Avec des motifs cubiques, isométriques (losange) ou hexagonaux (flat top or point top).

a) Illustration du mode plan par 2 exemples (projets complets joints) :

- Platformer 2016 :

- EKUME 2D :

b) Mode Isométrique :

- Iso_TileMaps_Demo_Project : Fourni et commenté ci-dessous (Tuiles carrées) :

https://drive.google.com/file/d/12odxbzFZmdOoknEHVnqA80vOrVU5nzzI/view

- MapTile Grid Creator (fourni et commenté – gratuit sur l’AssetStore) :

o Isométrique carré :

o Isométrique hexagonal :

c) Rappels et définitions :

o Sprite

Nous savons qu’un Sprite, dans un environnement 2D, sert aussi bien à matérialiser un

arrière-plan (background), un décor fixe ou un personnage.

Il se présente soit comme un fichier png isolé ou comme plusieurs dessins regroupés

dans un même fichier png, dénommé SpriteSheet.

Ces fichiers sont dans un répertoire des « Assets » du projet et doivent subir un

traitement préalable, dans Unity, pour y être reconnus.

Ils sont, ensuite, intégrés dans la scène, au travers du GameObject auquel ils sont

rattachés (via un composant SpriteRederer).

i. Pour illustrer, nous allons utiliser le Projet du Tutoriel « _Tuto_II_GameDesign »,

ouvert avec Unity 2018.4.18f1 :

ii. Créer un répertoire nommé « _Tuto01 » et une scène intitulée

« Manip_Sprites » - Ajouter, si nécessaire une « Directionnal Light », à la même

posotion que « Main Camera ».

iii. Dans le répertoire « Assets\Z_Commons\Sprites\Simple_Platform » , vous

disposez d’images au format png qu’il faut préparer pour UNITY : Faire une

multi-sélection dans les Assets (en gardant la touche Ctrl appuyée) :

L’inspecteur d’objet se présente ainsi, avant traitement :

Modifier « Texture Type » de Default à Sprite (2D and UI »

Avant de faire un clic-gauche sur « Apply ».

Vous constatez que UNITY a transformé les images en Sprites (ajoutés sous

chaque image) :

iv. Déposer, maintenant dans la scène, les sprites «2 », « 7 » et « 11 » :

Vous constatez que Unity a automatisé la création des GameObjects avec leur

propriété « SpriteRenderer » qui incorpore l’image choisie correspondante.

Disposer les, comme ceci, pour former une petite plateforme :

Observer comme il est fastidieux de les placer, dans la scène, pour obtenir cette

présentation (en fait, il faut que : X du centre valle 0, x de gauche -1 et x de

droite +1, tandis que les valeurs Y et Z restent à 0) :

Placer, encore les Sprites 13, 14 et 15 et l’échelle « ladder », et disposer le tout

comme ceci :

Ce n’est pas très explicite et lorsque nous aurons à dessiner un véritable niveau

de jeu, ce le sera, encore moins …

Pour nous y préparer, nous allons renommer et sauvegarder les

composants dans un sous-répertoire de _Tuto1 que vous nommerez « Prefabs » :

Dans la scène, renommer 2 en GroundCenter

7 en GroundRight

11 en GroundLeft

14 en PlatformCenter

15 en PlaformRight

13 en PlatformLeft

Ladder est suffisamment explicite

Déposer, un à un les 7 éléments dans le répertoire Prefabs :

Le placement de ces objets est fastidieux et délicat (alignement, dimension, sauvegarde,

réutilisation, organisation par niveau de jeu).

Chaque version de Unity amène son lot d’amélioration parmi lesquelles on peut

distinguer :

o Tile ou Tuiles : support de sprite de format et de taille normalisée,

o Grid ou Grille permettant de disposer les tuiles de manière jointive et alignée,

o TileSet ou Calque de dessin (plusieurs calques peuvent être superposés pour

donner un effet de profondeur ou d’élévation),

o TileMap ou Carte représentant un niveau de jeu,

o Palette ou groupe de tuiles sélectionnées pour un usage précis afin de faciliter le

déploiement. Nous verrons qu’il y 2 sortes de palette : l’une composée

d’« Assets », l’autre de « GameObjects»

2) Le mode plan préconisé dans « 1_TileMap_LevelEditor » :

a) Explication du mode en réutilisant les Sprites précédents :

- Créer une nouvelle scène, nommée « Simple_Platform », y ajouter une « Directionnal

Light »,

- Le mode d’affichage plan nécessite aussi un Canvas de dessin : Clic-droitèUIèCanvas

Paramétré comme suit :

- Choisir, aussi, la disposition 16/9, dans la fenêtre « Game » :

- Par un clic-droit dans la hiérarchieèCreate Empty pour insérer un nouveau

GameObject, le dénommer « Niveau1 »,

- Rechercher dans les Scripts du TileMap LevelEditor, «LevelEditor » et le déposer

dans Niveau1,

- Créer en nouveau GameObject, enfant de Niveau1, et dénommer le :

« Simple_Platform_TileSet », y déposer le script « Tileset » :

- Disposez la fenêtre Assets, comme ci-dessous, afin de compléter le paramétrages du

script du Niveau1 :

La dernière propriété « FillCursor » se trouve dans les Sprites avec l’arborescence

- Compléter les propriétés suivantes par Drag&Drop :

N’OUBLIEZ PAS

o D’indiquer le TileSet en déposant le GameObject « Simple_Platform_Tileset ».

o De compléter, si nécessaire File Extensions : Size = 1 et Element 0 = lvl

- Ajouter à la « Main Camera » de la scène, le script « Grid overlay » et renseigner la

propriété « Line Material », par « Grid Material » :

- Il nous reste à documenter les Tiles à faire figurer dans Simple_Platform_Tileset (ce

seront les « prefabs » que nous avons créé précédemment :

Nous pouvons, aussi, sauvegarder le Simple_Platform_TileSet comme un « prefab »

global.

- Tester la scène, ce qui doit donner ceci :

Vous constatez la rapidité de dessin, en utilisant la palette située à droite, et la facilité de

positionnement, avec des icônes explicites situées à gauche.

Vous pouvez dessiner ceci :

Utiliser le Zoom pour redimensionner la grille comme sur l’image, ci-

dessus.

Ou Utiliser les flèches directionnelles pour déplacer la grille :

- ATTENTION : L’OUTIL DE CONCEPTION N’EST ACCESSIBLE QU’A

L’EXECUTION DE LA SCENE, DONC PENSEZ A SAUVEGARDER VOTRE

DESSIN AVANT DE SORTIR, avec l’icône représentant une disquette

qui ouvre cette fenêtre :

Naviguez vers :

Assets\1_TileMap_LevelEditor\GracesGames\2DTileMapLevelEditor\DemoLevels

Et nommez ce fichier : Simple Platform.lvl avant de faire un nouveau clic sur la disquette

en bas à droite.

AINSI LE JOUEUR PEUT MODIFIER, LUI-MÊME, LA SCENE EN-COURS DU JEU ET IL PEUT

FAIRE APPARAITRE OU DISPARAITRE :

o LA GRILLE AVEC L’ŒIL SITUE SOUS L’ICONE :

o TOUS LES OUTILS AVEC LES ICONES : ou

- A l’inverse, on peut recharger la scène avec l’icône : En 2 temps, après avoir

indiqué le fichier de sauvegarde.

b) Observez les modèles fournies dans le projet :

C’est-à-dire les scènes : PlatformerDemo et SokobanDemo qui se trouvent ici :

- Il est possible de récupérer le dessin dans une scène, sans être encombré des outils, tel

qu’il est montré dans la scène : LevelBuilderDemo :

Cela suppose l’utilisation du Prefab fourni et nommé « LevelBuilder » paramétré ainsi :

Chemin d’accès au fichier de sauvegarde,

Drag&Drop du TileSet que l’on a sauvegardé au préalable

N’oubliez pas de mettre un Canvas dans la scène et d’ajouter le script GridOverlay à la

Camera.

Essayer de créer une scène « Simple_Platform_Demo » pour utiliser votre

« SimplePlatform ».

EN CONCLUSION :

METHODE ELEGANTE ET EFFICACE

DEFAUT : PAS D’ACCES EN CONCEPTION AUX ELEMENTS DE LA SCENE : IL FAUT REVENIR

INDEPENDAMMENT SOIT VERS LES IMAGES PNG, SOIT VERS LES PREFABS INCLUS DANS

LE TILESET.

IL EST IMPORTANT DE CONNAITRE LES AUTRES OUTILS DISPONIBLES AVANT D’ETABLIR

SES PREFERENCES.

3) Mode Isométrique présenté dans Iso_TileMaps_Demo_Project :

a) Préparation :

- Créer un nouveau Répertoire nommé _Tuto02

- Dans le répertoire \Assets\2_Tilemaps_Project\Scenes\Examples, Sélectionner

« Scene_Biome_Empty » et la dupliquer avec la combinaison de touche Ctrl+D :

Déplacer cette scène dans _TutoNo2 et la renommer Essai_TileMapEditor (elle contient

un personnage animé qui nous aidera à tester le comportement de notre

environnement). Mais, supprimer les 2 derniers objets (Grid-Level et Decoration)

b) Explication pratique des différents composants disponibles :

- Menu GameObjectè2DObjectèTileMap (nous verrons les 4 autres cas

ultérieurement).

Ce qui insère, simultanément, une Grille (Grid) contenant un TileMap :

Chaque carré de la grille est de dimension 1X1, et chaque tuile sera placée à une

intersection de carré en 0.5x0.5.

- Pour dessiner, il essayons d’utiliser une palette existante ou avant d’en créer une

nouvelle :

Menu Windowè2DèTile Plalette

Ce qui ouvre cette fenêtre :

Avec une liste déroulante permettant de passer de l’une à l’autre des palettes

existantes ; la dernière option « Create New Palette » permettant d’en définir une

nouvelle.

- Essayons de dessiner avec la palette existante pour nous familiariser avec les différents

outils proposés :

Après avoir sélectionné l’un des objet avec l’icône de gauche, le carré blanc au centre

permet de placer autant d’exemplaires voulus sur la grille, à chaque clic de la souris, de

manière très facile. La Gomme (avant dernière icône permet d’effacer une erreur de

manipulation ou un regret).

Je ne commente pas les icônes de coloriage car je n’en ai pas eu l’utilité.

Notez le bouton Edit qui permet de basculer en mode édition, n’oubliez pas de le

désactiver pour placer vos tuiles !!!

Enfin la liste « Active Tilemap » (qui actuellement ne contient qu’une seule alternative),

vous montre que l’on peut utiliser plusieurs « tilemap » dans une même grille).

Sur notre disque (Explorateur Windows),

Assets\2D_IsoTilemaps_Project\Tilemaps\Isometric\Tiles\Basic, vous constatez que les

tuiles utilisées sont des « assets » et non des « prefabs ».

Essayons de composer notre propre palette, pour cela créer un nouveau dossier intitulé

Tiles :

Choisir l’option « Create NewPallet » :

Nom = Ma_Palette_ISO,

Choisir « Isometric », et laisser les autres paramètres par défaut, clic sur « Create » :

Sélectionnez le dossier Tiles que nous venons de créer …

Disposer la palette en bas, en bas et sauvegarder cette disposition sous le nom :

« TileMap_Project» :

Nous allons y déposer des « Sprites » que vous trouverez dans ce répertoire fourni :

Assets\Z_Commons\Sprites\2D_ISO_Tile_Pack.

Il s’agit de blocs de différents matériaux : Choisir les éléments suivants :

Brick : ISO_Tile_Brick_Stone_01_05 (le dernier),

Grass : ISO_Tile_Dirt_01_Grass_01.png (le premier),

Low : ISO_LowTile_Stone_03 (le dernier),

Stair : ISO_Prop_Stair_Stone_01

Water : ISO_Overlay_Water_01

Wood : ISO_Tile_Wood_01

A chaque depot, il sera demandé d’enregister l’Asset correspondant, choisissez notre

repertoire Tiles et laisser le nom par défaut, et Enregistrer :

Vous devez obtenir la palette suivante :

Et pouvoir dessiner quelque chose comme cela , en vous exerçant avec les niveaux

d’élévation et les transparences. Pensez à sélectionner plusieurs objets avec la flèche,

puis à modifier leur positionnement avec le pavé directionnel.

Vous constatez que le système a créé, automatiquement, plusieurs TileMaps :

Votre dessin se trouve dans Tilemap – Level 1 – Detail (essayer de le supprimer, puis Ctrl

Z de revenir en arrière, pour en avoir confirmation).

MAIS VOUS NE TROUVEREZ PAS D’INSTANCIATION DES TUILES QUE VOUS AVEZ PLACEE

DANS CE TILEMAP.

PAR CONTRE VOUS POUVEZ EN FAIRE UN PREFAB, REUTILISABLE.

c) Explorer un niveau étendu avec la souris :

Tester le script « FlyCamera» proposé en Assets\Z_Commons\Scripts

Ajouter le à la camera de la scène et désactiver, momentanément, s’il y a lieu, l’autre

script « Basic Camera Follow » : Observez qu’avec un clic droit de la souris, vous pouvez

Particulièrement utile pour l’observation des exemples proposées, à condition de le

supprimer (remove component), ensuite, car il n’est pas compatible avec l’autre …

d) Observez les scènes qui ont construites avec les différentes palettes :

Et, particulièrement, la gestion des obstacles (Colliders) pour établir les limites du

déplacements du personnage ou gérer les collisions avec certains éléments du décor.

Vous trouverez, un fichier d’ aide (Create isometric 2D levels using the Tilemap

system.pdf) dans le répertoire du « Tilemap Project» afin d’approfondie certains

concepts… Il renvoie, aussi, à des vidéos YouTube.

4) Mode Isométrique présenté dans MapTile_GridCreator :

a) Explication du mode avec les palettes fournies dans ce projet :

- Créer un nouveau Répertoire nommé _Tuto03 et une scène intitulée

GridCreator_CubeTest

Ajouter le Script FlyCamera à Main Camera et une Directionnal Light,

Fermer la fenêtre de la palette du TileMap project.

- Click-gauche Menu – MapTileGridCreatorèOpen

Placer, aussitôt, le nouvel onglet à côté de l’Inspector.

Vous avez 2 choix de Grille : Cube ou Hexagonal

Clic sur New avec l’option Cube par défaut :

Un objet CubeGrid a été ajouté à la scène, passez en mode 3D pour mieux voir

L’inspecteur a été complété, ainsi :

Il montre que la grille, par défaut, a une taille de 20x20

Pour choisir une Palette (Pallet), clic sur « Open New pallet » et choisir la palette de

démonstration :

La rubrique Pallet Panel est complétée de 4 Tuiles et la rubrique Tools vous offre le choix

d’en sélectionner une (Select) puis de peindre dans la grille (Paint)

Qui permettent de dessiner sur la grille : Un petit cube au contours bleus apparait sur la

grille à la position indiquée par le curseur de souris et la tuile est déposée, à cet endroit,

par un clic gauche. C’est moins rapide qu’avec les outils précédents mais beaucoup plus

précis. Et, surtout, cela permet de dessiner des élévations …

Essayez de reproduire ceci :

Et, si vous avez dessiné dans le même ordre que moi , vous constatez que chaque tuile

est identifiée séparément dans la scène et précédée des 3 nombres rappelant sa

position :

Continuons, à remplie le centre de ce rectangle de gris et de construite une élévation en

vert :

Rien ne nous empêche de regrouper chaque couleur et/ou niveau dans un « Empty Game

Object » afin de pouvoir replier les composants de chaque gameobject.

Vous pouvez renommer et créer un préfab de chaque sous-ensemble ou de la grille

entière.

Mais les bouton « Save » , puis « Load », nous permettent, aussi, d’utiliser des fichiers en

JavaScript (dans notre répertoire _Tuto03) :

Vous pouvez, maintenant supprimer votre grille et tout son contenu et le restaurer,

aussitôt, par la manipulation inverse.

INCONTESTABLEMENT, CET OUTIL EST MON PREFERE POUR SA PRECISION (CHAQUE

TUILE EST INDENTIFIEE , MODIFIABLE ET REUTILISABLE. MEME SI SON UTILISATION EST

MOINS ELEGANTE QUE LES PRECEDENTS.

- Vous pouvez créer une nouvelle scène :GridCreator_HexaTest, et refaire le même

exercice avec lapalette hexagonalequi se trouve en :

Assets\3_MapTile_GridCreator\Pallets\Hexagonal

b) Observer les scènes qui sont fournies en exemple :

3 exemples sont fournis :

Avec un Player (en forme de capsule) se déplaçant, de tuile en tuile, soit avec les touches

fléchées, soit avec les touches du clavier ZSQD.

La combinaison, simultanée de 2 touches, permet d’aller en diagonale mais c’est saccadé et

cela mérite d’être amélioré.

Les élévations sont des obstacles (Un composant « Box Collider » leur est attaché), de même

que les tuiles périphériques pour éviter à la capsule de tomber dans le vide

c) Construire et utiliser ses propres palettes de tuile :

- Créer une nouvelle scène intitulée « Prepa_Prefab_Tiles »

- Dans le répertoire « 0_SpriteSlicer » sélectionner la « SpriteSheet »

« Colored_Cubes&Hexa »:

Pour décomposer en Sprites individuels, modifier l’Inspecteur comme ceci :

Cocher Read/Right Enabled

Puis Clic sur « Sprite Editor » (répondre Apply dans la boite de message) :

Modifier les paramètres par défaut, comme ci-dessous (obtenus par tâtonnements), puis

Clic sur « Slice » :

Puis sur Apply : puis fermer l’éditeur de Sprites.

Les Sprites individuels sont instanciés, dans les assets, sous « Colored_Cubes&Hexa » :

- Nous allons les extraire vers le répertoire :

Assets\Z_Commons\Sprites\Cubes&Hexa_Pastel\Avant retraitement

A l’aide du Script « SpriteTextureSliceExporter » qui affiche un menu de même nom :

Vérifiez que le répertoire se soit bien rempli de fichier png individuel. Ils sont,

malheureusement, mal centrés et entouré de blancs, donc difficiles à utiliser en l’état…

Avec un outil de dessin, découper les carrés et sauvegarder les dans le répertoire :

« Après_retraitement », en « Pastel1 à 8 »

répertoire : Assets\3_MapTile_GridCreator\Pallets\Cubes

Clic droitèUnpack Prefab, puis le renommer Cube_Standard,

Drag&Drop « Pastel1 » au bas des propriétés du Cube.

- Déposer, de la même façon, le Prefab Hexagonal, par défaut,

Clic droitèUnpack Prefab, puis le renommer Hexa_Standard,

Drag&Drop « Pastel1 » au bas des propriétés de l’hexagone.

- Créer un répertoire Prefab avec le chemin d’accès suivant :

Assets\Z_Commons\Sprites\Cubes&Hexa_Pastel\Prefab

Déposer le cube et l’hexagone dans ce répertoire et renommer les Cube_pastel1 et

Hexa_pastel1 (Choisir l’option « Original Prefab » lorsque demandé).

- Réutiliser les mêmes GameObjects avec les Couleurs 2 à 8 : Après avoir par un clic-droit

« Unpack Prefab »,changer la couleur et, construisez, ainsi, les prefabs suivants :

- Il ne vous teste plus qu’à construire une nouvelle grille avec des TileMaps, utilisant ces

nouveaux prefabs en forme de cubes ou d’héxagones.

- Pour agrémenter, vous pouvez décomposer le SpriteSheet intitulé : « Hexa_Props » qui

contient 222 décors à placer sur la grille.

- Ou d’exploiter celle dénommée « Banana qui contient les éléments de la plateforme du

Niveau1 de la démo du jeu « Super Monkey » (sources fournies).

d) Des Décors plus réalistes ?

- Vous trouverez en \Assets\4_Isometric Pack 3d, un projet présentant des composants

plus réalistes, avec des scènes de démonstration que je vous invite à consulter.

- J’en ai repris les composants avec MapTileGridCréation dans la scène Essai_3D_Iso

(fournie) que je ne commenterai pas mais que vous pouvez vous exercer à reproduire :

Enfin, si vous voulez approfondir, vous trouverez la documentation dans le fichier Map Tile Grid

Creator.docx qui est joint

II – Construire un environnement de jeu en 3D :

L’évolution importante de Unity, les 2 dernières années, dans ce domaine, nous incite à poursuivre

avec une Version au moins égale la v.2019.2.

Elle nécessite, préalablement, à son installation, une nouvelle version du Hub, supérieure à 2.2. (voir

fichiers joints).

Il est significatif que Unity ait intégré ProBuilder dans les packages livrés depuis la version 2018.

Comme cette solution semble validée, nous allons nous concentrer sur elle (bien qu’il en existe

d’autres élégantes telles que GILES, SabreCSG ou Pro TileMap Editor.

1) ProBuilder :

a) Vérification des composants nécessaires :

- Menu WindowsèPackageManage

Onglet AdvancedèShow Previous Packages :

Verifier que Probuilder (version supérieure à 4.0.5) et Progrids (version supérieure à 3.0)

sont actives.

- Window / AssetStore / Rechercher - Importer et Installer :

o Snaps Industry Scifi et Snaps Office

o Asset Snap Tools

Hdrp ou Vrp Real Material (lourd et long : 3.42 Go) Jolies textures mais accessoires

b) Utilisation avec les éléments préfabriqués :

- Lancer Unity 2019 et choisir le projet : Nono_2019\ProBuilder Prototype-Snaps

Nous disposons de l’arborescence suivante :

- Créer une nouvelle scène intitulée Test_Prefab_Building, dans le répertoire :

\Assets\Scene

- Menu ToolsèProGrids Windows :

pour disposer de la barre

d’outil suivante :

Les icones ont une bulle descriptive et nous n’allons en utiliser que 2 :

touche bascule pour faire apparaitre ou disparaitre la grille,

pour coller un objet sur le carreau de grille le plus proche

- Glisser / Déposer Deck_Floor_01_snaps002 dans la scène, le coller à un carreau de la

grille, puis

Par la combinaison simultanée de touches Crtl + D, dupliquer 6 fois cet objet et les

disposer en angle :

Avec une SnapValue de 3, la dalle sera de la même dimension qu’une case de la grille ;

Cocher l’option SnapOnScale : On

- déplacer et vérifier le positionnement automatique

Disposer les fenêtres ainsi pour faciliter usage (cacher Inspecteur / Debugger / Game) :

Déposer et dupliquer : Gen_Floor_03_snaps002 (par rangées pour aller plus vite)

Espacer quelques : Gen_Floor_04_snaps002 et Deck_Floor_02_snaps002 pour éviter la

monotonie

Chercher et disposer en périphérie : Gen_Wall_snaps002

Laisser 2 ouvertures au bout des chemins

Mettre angles : Gen_Wall_Corner_snaps002, les orienter et disposer (utiliser la rotation,

propriété « transform » de l’inspecteur).

2 Deck_WallDoorFrame_02_snaps002 à l’emplacement des ouvertures

Afin d’obtenir la figure suivante :

La seule chose délicate est de positionner la camera et la distance pour bien voir ce que l’on

fait. Penser à utiliser, aussi, l’icône de la barre principale pour déplacer toute la scène.

- Copie du rez de chaussée pour faire un étage (remplacer les portes par un mur) :

Pour éviter la barre gris foncé entre le rez de chaussée et l’étage (faire scale -1 sur l’étage –

cela remonte la barre en haut).

- Créer un podium avec escalier d’accès :

Cloison intérieure : Deck_Wall_Short_snaps002

Plancher intérieur : Deck_Floor_02_snaps002

Escalier : Deck_Stairs_01_snaps002

Essayer de vous rapprocher de la présentation, ci-dessous :

Fenêtre - Scène :

Fenêtre – Game

Ceci vous donne un aperçu de la capacité de cet outil de conception qui permet d’intégrer,

facilement, des objets, matériaux et textures provenant d’outils de dessin professionnel. Et,

souvent, disponibles gratuitement ou pour des sommes modiques.

c) Présentation des principaux outils de création d’un décor :

- Utilisation des outils disponibles :

La documentation (en anglais) est disponible dans le projet, ainsi que quelques vidéos

YouTube qu’il est utile de parcourir.

Nous avons inclus les 2 seules vidéos valables en français que nous avons résumé, ci-

dessous (Si vous les consultez, vous pouvez sauter les généralités du début et vous

concentrer sur les manipulations d’outils) :

o La Barre d’outil (ToolBar)

Créer une nouvelle scène « Test_Pro_Tools » ,

Puis afficher la fenêtre Probuilder, ainsi :

Menu ToolsèProbuilderèProbuilder Windows

Elle s’affiche en 2 parties :

 Une petite barre est ajoutée à la scène :

Elle présente 4 modes de sélection (de gauche à droite)

· Object (formes)

· Vertex (Points ou angles)

· Hedge (Arêtes ou lignes)

· Face (face ou façade)

 Une grande barre d’outil flottante

Clic droit de la souris : La fenêtre peut être paramétrée différemment :

Choisissons « Dockable Window » mais conservons la présentation par icône

Disposer les fenêtres, comme ci-dessous :

Et enregistrons cette disposition :

Revenons vers la fenêtre d’icônes à droite : Elle est très fournie mais certaines

icônes sont activées (colorées), d’autres ne le sont pas encore (N&B).

Cette barre d’outils est dynamique, c’est-à-dire que son contenu est activé selon le

contexte ; qui est une combinaison du mode et de l’outil choisis.

Nous verrons que c’est très utile mais, à condition d’avoir un peu de pratique.

Remarquer déjà que si on laisse un peu trainer le curseur de la souris, une fenêtre

« pop-up » affiche des commentaires et RACCOURCIS !!!.

Après ces explications, nous pouvons commencer à tester…

o Shape Tool – Outil Formes :

Un Clic simple, dépose un Cube dans la grille,

En maintenant la touche ALT enfoncée, ce même Clic va ouvrir la fenêtre suivante :

Qui nous offrira le choix de différentes formes de base (à personnaliser) :

Essayons Stair (escalier), qui apparait dans la scène, et nous pouvons le modifier soit

en jouant avec les paramètres, soit en en modifiant ses contours à la souris, après

avoir choisi un mode (forme, angle, arête ou face) :

Modifier le nombre de marches, la hauteur, la largeur ou la rotation :

CLICK SUR BUILD POUR DEPOSER LA FORME DANS LA GRILLE, AVANT DE SORTIR DE

CETTE FENETRE.

SHIFT + CTRL + K permet de ré-ouvre la fenêtre de paramétrage.

Explorer les autres formes et leurs propriétés !!!

NOTEZ QUE LES OUTILS STANDARD SONT TOUJOURS ACTIFS

ce qui améliore l’ergonomie

Passons à l’icône suivante de la barre d’outil :

Créer sa propre forme et la modifier par inclusion et extrusion :

Chaque Clic pose, dans la scène, un point qui reliés les uns aux autres dessinent un

forme :

Essayons de dessiner quelque chose comme ceci :

En mode objet, les icônes actives sont :

Notre forme est fermée de l’extérieur, nous pouvons la découvrir de l’intérieur, par :

et vice-versa

Passons en mode Points (Vertex), la palette devient :

Sélectionner l’angle en haut à gauche, puis clic sur Mirror… Notre objet est

répliqué, symétriquement, sur cet angle – point pivot :

Annuler Ctrl + Z

L’cône « Offset Edge » permet de déformer un angle en le déplaçant

o Smooth Group Editor, équivalente au mode « Face » ou « façade »

Sélectionnons la face horizontale de notre forme, et utilisons l’icône de subdivision

2 Clics successifs, pour obtenir un carreau sélectionnable :

En maintenant la touche SHIFT enfoncée, faire monter ou descendre le carreau :

Cela équivaut à une Extrusion ou intrusion de la surface

(ce qui donnera un trou ou un passage) dans la structure.

ATTENTION : N’UTILISER PAS LA TOUCHE SUPP CE QUI SUPPRIMERAIT LA FORME EN

ENTIER – HEUREUSEMENT CTRL + Z REMEDIERAIT A CETTE ERREUR

L’icône « Bevel » permet de biseauter les pourtours de la surface

sélectionnée :

L’icône « Select face loop » permet de sélectionner, automatiquement,

toutes les formes contigües de la face sélectionnée :

Vous comprenez la richesse des possibilités offertes et devinez l’utilité qu’elles

peuvent avoir pour prototyper un niveau de jeu, avant d’investir dans le dessin des

détails.

Il est difficile de les présenter toutes et il est recommandé de les explorer, par soi-

même, minutieusement. L’exercice qui vous sera proposé, au paragraphe suivant, y

contribuera, également.

o Matières, Textures et Couleurs :

permet de constituer une palette de matières personnalisables

permet de choisir et appliquer une couleur à partir d’une palette :

d) Exemple de prototypage d’une piscine :

Une fois ces bases acquises, vous pouvez consulter la vidéo jointe :

Demo_Piscine_Probuilder_STFR.mp4 (en anglais mais dont j’ai traduit les sous-titres à partir de la

Même si le démonstrateur est d’une dextérité excessive pour nous, il démontre bien les

possibilités extraordinaires de PowerBuilder et, vous devriez pouvoir suivre avec la traduction et

les exercices précédents.

Je vous recommande de faire des poses fréquentes pour reproduire la démonstration, au moins

partiellement, dans un nouveau projet. Mais, je l’ai, aussi, fait pour vous dans la scène fournie et

intitulée : Test_Proto_Piscine.unity.

On se déplace autour de la piscine avec les flèches directionnelle, en s’orientant à la souris (avec

zoom et rotation).

Même si le dessin est très gèométrique et répétitif, les vues sont très impressionnantes comme

le démontre ces quelques copies d’écran :

A BIENTOT …